<template>
  <div
      v-if="isSupported"
      class="vue-video-recorder"
      :class="{
      'active': isRecording,
      'paused': isPaused
    }"
  >

    <div class="recorder-icon"
         @mousedown="startRecording"
         @mouseleave="stopRecording"
         @mouseup="stopRecording"
         @touchstart="startRecording"
         @touchend="stopRecording"
         @touchcancel="stopRecording"
         :class="isRecording?'stop-btn':'start-btn'">
      <span v-if="isRecording">停止</span>
      <span v-else>开始</span>
    </div>
  </div>
</template>

<script>
import ElementMixin from './ElementMixin'

const supportedTypes = [
  'video/x-msvideo',
  'video/ogg',
  'video/mpeg',
  'video/webm'
]

export default {
  name: 'VueRecordVideo',
  mixins: [ElementMixin],
  props: {
    mimeType: {
      type: String,
      default: 'video/webm',
      validator: v => supportedTypes.includes(v)
    },
    audio: {
      type: Boolean,
      default: true
    },
    mode: {
      default: 'press'
    }
  },
  computed: {
    constraints() {
      return {
        video: true,
        audio: this.audio
      }
    }
  }
}
</script>

<style>
.vue-video-recorder {
  color: white;
  border-radius: 18px;
  position: relative;
  display: flex;
  font-size: 16px;
  justify-content: center;
}

.recorder-icon {
  cursor: pointer;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
}

.start-btn {
  background-color: #4DB6AC;
}

.stop-btn {
  background-color: #f56c6c;
}
</style>
